<template>
	<div class="spring">
		<div v-for="label in labels" :key="label" class="spring__item yd-flex-v-hC-vC cursor">
			<div class="spring__line"></div>
			<div class="spring__box">
				<div class="spring__inn yd-flex-h-hC-vC">{{label}}</div>
			</div>
		</div>
	</div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';

export default defineComponent({
	props: {
		labels: {
			type: Array,
			required: true
		}
	}
})
</script>

<style scoped>
.spring{
	animation: swing 5.2s infinite ease-in-out;
  transform-origin: 50% -20px;
}
.spring__line{
	width: 2px;
	height: 8px;
	background-color: #BB1314;
}
.spring__item:first-of-type .spring__line{
	height: 0px;
}
.spring__box{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 2px solid #BB1314;
	box-sizing: border-box;
	padding: 2px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 0 10px rgb(187, 19, 20, 0.5);
}
.spring__inn{
	width: 100%;
	height: 100%;
	line-height: 1;
	font-size: 30px;
	color: #fff;
	border: 2px solid #BB1314;
	border-radius: 50%;
	box-sizing: border-box;
	font-weight: bold;
	font-family: cursive;
	background-color: #BB1314;
	transition: color 0.28s;
}
.spring__item:hover .spring__inn{
	color: #ffc610;
}
@keyframes swing {
  0% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(-2deg);
  }
}
</style>
